<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" label-position="right" label-width="120px">
      <div class="title_2">消息查询</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="分公司" prop="branchId">
            <el-select
              v-model="queryParams.branchId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务流水号" prop="todoNo">
            <el-input
              v-model="queryParams.todoNo"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消息创建时间" prop="createTime" style="width: 420px">
            <el-date-picker
              v-model="queryParams.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder=" "
              end-placeholder=" "
              value-format="YYYY-MM-DD"
              size="default"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务大类" prop="bizGategory">
            <el-select
              v-model="queryParams.bizGategory"
              placeholder="请选择"
              clearable
              @change="changeBiz"
              style="width: 300px"
            >
              <el-option
                v-for="dict in bizGategoryOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务类型" prop="bizType">
            <el-select
              v-model="queryParams.bizType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in bizTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label=" " prop="myAttention">
            <el-checkbox v-model="queryParams.myAttention" label="我关注的法人客户相关消息" size="large" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-form-item>
          <el-button  @click="resetQuery(queryRef)">重置</el-button>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <div class="title_2">消息列表</div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="1" label="待阅">
        <div class="mb10 pull-right">
          <el-button plain type="primary" @click="batchRead">批量阅读</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2" label="已阅"></el-tab-pane>
      <el-tab-pane name="0" label="全部">
        <div class="mb10 pull-right">
          <el-button plain type="primary" @click="batchRead">批量阅读</el-button>
        </div>
      </el-tab-pane>

      <el-table
        v-loading="loading"
        :data="messageList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" v-if="activeName != '2'" width="55" align="left" />
        <el-table-column label="任务大类" align="center" prop="bizGategory" :show-overflow-tooltip="true"/>
        <el-table-column label="任务类型" align="center" prop="bizType" :show-overflow-tooltip="true"/>
        <el-table-column label="消息内容" align="center" prop="messageContent" min-width="500" :show-overflow-tooltip="true"/>
        <el-table-column label="任务流水号" align="center" prop="todoNo" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="创建时间" align="center" prop="createTime" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="消息状态" align="center" prop="messageStatusName" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" v-if="activeName != '2'" align="center" width="100" class-name="small-padding fixed-width">
          <template #default="{row}">
            <el-button link type="primary" v-if="row.status == '1'" @click="handleRead(row)">阅读</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

    </el-tabs>
    
  </div>
</template>

<script setup name="myTask">
import { getTime } from "@/utils/index.js"
import { parseTime } from "@/utils/ruoyi.js"
import { ElMessageBox } from 'element-plus'

const messageList = ref([])
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const activeName = ref('1')
const queryRef = ref(null)
const branchOptions = ref([
  { label: '全部', value: '' },
  { label: '总公司', value: 1 },
  { label: '上海分公司', value: 22 },
])
const bizGategoryOptions = ref([
  { label: '全部', value: '' },
  { label: '客户管理', value: 1 },
])
const bizTypeOptions = ref([
  { label: '全部', value: '' },
])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    branchId: undefined,
    todoNo: undefined,
    bizGategory: '',
    bizType: '',
    initiatorName: '',
    createTime: [],
    myAttention: undefined,
  },
})

const { queryParams } = toRefs(data)

queryParams.value.createTime = [parseTime(getTime('start'), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')]

const changeBiz = (val) => {
  queryParams.value.bizType = ''
  if (val) {
    bizTypeOptions.value = [
      { label: '全部', value: '' },
      { label: '客户新增', value: '1' },
    ]
  } else {
    bizTypeOptions.value = [
    { label: '全部', value: '' },
    ]
  }
}
const handleClick = (tab, event) => {
  console.log(tab, event)
  handleQuery()
}
const getList = () => {
  loading.value = true
  setTimeout(() => {
    messageList.value = [
      {
        todoNo: "2024010111",
        bizGategory: "客户管理",
        bizType: "客户变更",
        messageContent: "客户“上海建筑工程集团”的企业家族树发生变化，已新增”上海XX集团投资有限公司”及其下属机构。",
        createTime: "2024-01-01",
        messageStatusName: "待阅",
        status: "1",
        messageStatus: 0,
      },
      {
        todoNo: "2024010111",
        bizGategory: "客户管理",
        bizType: "客户变更",
        messageContent: "张三【总公司/重大客户部】于 2024-01-02 提交跨部门修改处室申请。客户代码【VIP1000000000021]",
        createTime: "2024-01-02",
        messageStatusName: "已阅",
        status: "2",
        messageStatus: 0,
      },
      {
        todoNo: "2024010111",
        bizGategory: "客户管理",
        bizType: "客户变更",
        messageContent: "张三【总公司/重大客户部】于 2024-01-01 提交跨部门修改处室申请。客户代码【VIP1000000000021]",
        createTime: "2024-01-01",
        messageStatusName: "待阅",
        status: "1",
        messageStatus: 0,
      },
    ].filter(item => {
      return (activeName.value == '0' || item.status == activeName.value)
    })
    total.value = Number(messageList.value.length)
    loading.value = false
  }, 300)
}
const handleQuery = () => {
  queryParams.value.pageNum = 1
  console.log('==', (queryParams))
  getList()
}
const resetQuery = (formEl) => {
  formEl.resetFields()
  handleQuery()
}
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.jobId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
const batchRead = (row) => {
  console.log(row)
}
const handleRead = (row) => {
  ElMessageBox.confirm(row.messageContent, "消息内容", {
    showCancelButton: false,
    type: "warning",
  }).then(() => {

  }).catch(() => {

  })
  console.log(row)
}
getList()
</script>
<style lang="scss" scoped>

</style>